<template>
	<jk-dialog
		v-model="showDialog"
		title="增加-生产数量"
		width="900px"
		:show-content-loading="showLoading"
		:save-btn-loading="saveBtnLoading"
		append-to-body
		:show-confirm-btn="false"
		:show-save-btn="true"
		:permission-prefix="permissionPrefix"
		@on-cancel="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
		@on-save="onConfirmBtn"
	>
		<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" :show-message="false">
			<el-tabs v-model="activeTab" type="border-card">
				<el-tab-pane label="基本信息">
					<span slot="label"><i class="el-icon-document"></i> 基本信息</span>
					<el-row class="flex-start-center-wrap">
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="客户">
								<span class="read-only-2">{{ formData.customerName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="品种">
								<span class="read-only-2">{{ formData.productName }}</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-divider><i class="el-icon-tickets item-gap" style="font-size: 16px;"></i>操作信息</el-divider>
					<el-row class="flex-start-center-wrap">
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="增加数量" prop="addOrderQty">
								<jk-number-input v-model="ruleForm.addOrderQty" :min="-9999999" placeholder="增加数量"></jk-number-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="增加后数量">
								<span class="read-only-2">{{ (formData.orderQty || 0) + (ruleForm.addOrderQty || 0) }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item class="margin-bottom-10" label="备注">
								<el-input v-model="ruleForm.remark" placeholder="" type="textarea" :rows="2"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="增加记录">
					<span slot="label" ref="box1"><i class="el-icon-time"></i> 增加记录</span>
					<jk-table border :data="tableData" :height="dialogTableHeight - 80">
						<vxe-column title="生产数量" align="right" field="remark" :width="90">
							<template slot-scope="scope">
								<span>{{ scope.row.orderQty + scope.row.addOrderQty }}</span>
							</template>
						</vxe-column>
						<vxe-column title="原有数量" align="right" field="orderQty" :width="90" />
						<vxe-column title="增加数量" align="right" field="addOrderQty" :width="90" />
						<vxe-column title="备注" align="left" field="remark" :min-width="100"></vxe-column>
						<vxe-column title="创建人" align="left" field="creatorName" :width="100"></vxe-column>
						<vxe-column title="创建时间" align="left" field="createTime" :width="160" />
						<vxe-column title="操作" align="center" field="remark" :width="90">
							<template slot-scope="scope">
								<el-popconfirm title="确定删除吗？" @confirm="onConfirmBtnOfDeleteBtn(scope.row)">
									<el-button slot="reference" type="text" icon="el-icon-delete" size="mini"></el-button>
								</el-popconfirm>
							</template>
						</vxe-column>
					</jk-table>
				</el-tab-pane>
			</el-tabs>
		</el-form>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import remoteSearchEmpInput from '../../../../production/order/components/remote-search-emp-input';
    import {
        productionProductOrderQtyRecordCreate, productionProductOrderQtyRecordDelete,
        productionProductOrderQtyRecordPage
    } from '../../../../../api/production/order';
    export default {
        components: {
            remoteSearchEmpInput
        },
        props: {
            // 页面权限的前缀
            permissionPrefix: {
                type: String,
                default: ''
            },
            dialogState: {
                type: Boolean,
                default: false
            },
            defaultTypeCode: {
                type: String,
                default: ''
            },
            dataId: {
                type: [String, Number],
                default: ''
            },
            formData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mixins: [calHeight],
        data() {
            return {
                activeTab: '0',
                showDialog: false,
                showLoading: true,
                saveBtnLoading: false,
                ruleForm: {
                    addOrderQty: null,
                    remark: ''
                },
                rules: {
                    addOrderQty: [{ required: true, trigger: 'change' }]
                },
                tableData: []
            };
        },
        methods: {
            onConfirmBtnOfDeleteBtn(row) {
                productionProductOrderQtyRecordDelete({ id: row.id }).then(res => {
                    if (res.data.status === 200) {
                        this.$tipsBar(this, 'save');
                        this.$emit('on-finish');
                    }
                });
            },
            saveRequest() {
                this.saveBtnLoading = true;
                productionProductOrderQtyRecordCreate({
                    addOrderQty: this.ruleForm.addOrderQty,
                    remark: this.ruleForm.remark,
                    productOrderId: this.formData.id
                }).then(res => {
                    this.saveBtnLoading = false;
                    if (res.data.status === 200) {
                        this.$tipsBar(this, 'save');
                        this.$emit('on-finish');
                    }
                });
            },
            onConfirmBtn() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        this.saveRequest();
                    } else {
                        this.$tipsBar(this, 'validator');
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                    this.$nextTick(() => {
                        this.$refs.ruleForm.resetFields();
                    });
                }
            },
            getListRequest() {
                if (this.formData.id) {
                    return productionProductOrderQtyRecordPage({
                        productOrderId: this.formData.id
                    }).then(res => {
                        if (res.data.status === 200) {
                            this.tableData = res.data.res;
                        }
                    });
                }
            },
            async getDependentData() {
                this.showLoading = true;
                if (this.formData.id) await this.getListRequest();
                this.showLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        }
    };
</script>
